<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/sub.css" />
		<link rel="stylesheet" type="text/css" href="css/detail.css" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
	   <header class="mui-bar mui-bar-nav detail">
	       <a class="mui-action-back mui-pull-left icon-left"></a>
	       <h1 class="detail-tit mui-ellipsis mui-pull-left">我的详情</h1>
	       <a href="" class="mui-pull-right icon-serve" style="font-size: .64rem;"></a>
	       <a href="" class="mui-pull-right icon-share mr24" style="font-size: .64rem;"></a>
	   </header>
		<div class="mui-content">
			<!--S轮播图-->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop" id="sliderwrap">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="http://placehold.it/400x240">
						</a>
					</div>
				</div>
			</div>
			<!--E轮播图-->
			<!--S头部信息-->
			<div id="content-header">
				
			</div>
			<!--E头部信息-->
			
			<!--详情选择部分-->
			<div class="detail-select">
				<ul>
					<li class="active" data-js="">商家案例</li>
					<li data-js="">品牌介绍</li>
					<li data-js="">顾客评价</li>
				</ul>
			</div>
			<!--详情选择部分-->
			
			<!--内容详情部分-->
			<div class="detail-content" id="conWrap">
				<div class="show-img">
					<img src="http://placehold.it/400x240"/>
					<img src="http://placehold.it/400x240"/>
					<img src="http://placehold.it/400x240"/>
				</div>
			</div>
			<!--内容详情部分-->
		</div>
		<!--脚部-->
		<nav class="mui-bar mui-bar-tab detail-footer">
			<h1 class="phone-num mui-pull-left">400-8819-520</h1>
			<a href="#" class="footer-btn mui-pull-right">我也要写</a>
			<div class="mui-pull-right mt30 mr24">
				<i class="icon-like"></i>
				<i class="icon-comment"></i>
				<i class="icon-collect"></i>
			</div>
		</nav>
		
		<script type="text/html" id="sliderJs">
			<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="{{carousel[length].img}}?imageView2/1/w/400/h/300">
				</a>
			</div>
			{{each carousel as item index }}
			<div class="mui-slider-item">
				<a href="#">
					<img src="{{item.img}}?imageView2/1/w/400/h/300">
				</a>
			</div>
			{{/each }}
			<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="{{carousel[0].img}}?imageView2/1/w/400/h/300">
				</a>
			</div>
		</script>
		<!--头部样式1-->
		<script type="text/html" id="wedshopheader">
			<div class="detail-header wedshop-header">
				<div class="shop-logo">
					<img src="http://placehold.it/90x90"/>
				</div>
				<h1 class="mod-title-30">管家名</h1>
				<div class="shop-gift">
					<span class="gift-dd">到店礼</span>
					<span class="gift-yh">优惠礼</span>
					<span class="gift-zf">支付礼</span>
				</div>
				<p class="mod-price mt12">&yen;19999-49999/场</p>
				<p class="mod-detail-22 mt6">婚礼经验：23场</p>
				<div class="under-line mt12"></div>
				<p class="mod-detail-22 lh36 mt12"><i class="icon-locat mr6"></i>重庆市渝中区解放碑时代豪苑D座31-9</p>
				<p class="mod-detail-22 lh36"><i class="icon-phone mr6"></i>023-4864-5633</p>
				<p class="mod-detail-22 lh36">客户评星:&nbsp;&nbsp;<i class="icon-star"></i><i class="icon-star"></i></p>
				<a href="javascript:void(0)" class="make-online mt6">在线预约</a>
			</div>
			
		</script>
		<!--头部样式2-->
		<script type="text/html" id="wedheader">
			<div class="detail-header wed-header">
				<h1 class="mod-title-30">婚礼主题名字</h1>
				<div class="mt12">
					<span class="mod-price">&yen;&nbsp;4999</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="mod-detail-24">销量:&nbsp;&nbsp;21</span>
				</div>
				<p class="mod-detail-22 lh36"><i class="icon-locat mr6"></i>喜来登大酒店</p>
				<p class="mod-detail-22">商家：Shllife摄影</p>
				<p class="mod-detail-22 lh36">客户评星:&nbsp;&nbsp;<i class="icon-star"></i></p>
			</div>
		</script>
		
		<!--商家案例 管家案例 摄影案例 婚礼案例  餐厅介绍-->
		<script type="text/html" id="sjalJs">
			<div class="shopcase-wrap">
				{{ each arr as item index }}
					<div class="shopcase mui-clearfix">
						<div class="shopcase-header mui-pull-left">
							<img src="http://placehold.it/261x261"/>
						</div>
						<div class="shopcase-body mui-pull-right">
							<h1 class="mod-title-30">婚礼名字主题</h1>
							<p class="mod-price mt6">&yen;36666</p>
							<p class="mod-detail-24 mui-ellipsis mt6">桌数</p>
							<p class="mod-detail-24 mui-ellipsis-2 lh30 mt6">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>
							<a href="javascript:void(0)" class="mod-nav">查看详情 ></a>
						</div>
					</div>
				{{/each}}
			</div>
		</script>
			
		<!--品牌介绍  管家介绍  个人介绍-->
		<script type="text/html" id="ppjsJs">
			<div class="show-img">
				{{ each arr as item index }}
				<img src="http://placehold.it/400x240"/>
				{{/each}}
			</div>
		</script>
		<!--顾客评价-->
		<script type="text/html" id="gkpjJs">
			<div class="comment-wrap">
				{{ each arr as item index }}
				<div class="comment">
					<div class="comment-header mui-clearfix">
						<div class="comment-header-img mui-pull-left">
							<img src="http://placehold.it/99x99"/>
						</div>
						<div class="comment-header-con mui-pull-left">
							<h1 class="mod-title-24 mui-ellipsis">用户名</h1>
							<div class="mod-detail-22 mt12">
								<i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i>
							</div>
							<p class="mod-info-20 mui-ellipsis mt12"> 2017-06-31</p>
						</div>
					</div>
					<div class="comment-body">
						<p class="mod-info-20 mui-ellipsis-2">评价内容评价评价内容评评价内容评内容评价内容评价内容评价内容评价内容评价内容评价内容，评价内容评价内容评价内容评价内容评价内容评价内容 评价内容评价内容评价内容。评价内容显示两排</p>
						<div class="comment-body-imgs">
							<img src="http://placehold.it/150x150"/>
							<img src="http://placehold.it/150x150"/>
							<img src="http://placehold.it/150x150"/>
						</div>
					</div>
				</div>
				{{/each}}
			</div>
		</script>

		<!--照片欣赏， 商品详情-->
		<script type="text/html" id="zpxsJs">
			<div class="show-img">
				{{ each arr as item index }}
				<img src="http://placehold.it/400x240"/>
				{{/each}}
			</div>
		</script>
		
			
		<!--套系包含， 商品信息，案例包含-->
		<script type="text/html" id="albhJs">
			<div class="case-wrap">
				{{ each arr as item index }}
					<div class="case">
						<div class="case-header">
							<h1 class="mod-title-22">造型</h1>
						</div>
						<div class="case-body mt12">
							{{each arr as item index}}
							<div class="case-item mui-clearfix">
								<p class="case-item-tit mui-pull-left">[ 新娘服装 ]</p>
								<p class="case-item-con mui-pull-right">提供新提供新提供新提供新提供新郎拍摄西摄西装提供新郎拍摄西装</p>
							</div>
							{{/each}}
						</div>
						
					</div>
				{{/each}}
			</div>
		</script>
		<!--蜜月包含-->
		<script type="text/html" id="mylxJs">
			<h1>这是蜜月包含</h1>
		</script>

		<script src="js/artTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/mod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/detail.js" type="text/javascript" charset="utf-8"></script>
	</body>
	
	

</html>